<style scoped lang="scss">
.dl1 {
  display: flex;
  // background-color: red;
  border-bottom: 1.6px solid gainsboro;

  dt {
    img {
      padding: 10px;
      width: 197px;
      height: 111px;
    }
  }

  dd {
    padding: 20px 0;

    p {
      display: flex;
      justify-content: space-between;

      span {
        font-size: 12px;
      }
    }
  }

  .p1 {
    margin-top: 10px;
    display: flex;

    img {
      width: 33.3%;
      padding: 2px;
    }
  }

  .p2 {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    padding-top: 30px;
  }
}

.tab {
  display: flex;
  justify-content: space-around;
  height: 50px;
  line-height: 50px;
  text-align: center;

  .tab-item {
    &.active {
      color: #3087ea;
    }
  }
}
</style>
<template>
  <div>
    <div class="tab">
      <span class="tab-item" v-for="(item, index) in homeTabData" :key="index" @click="homeTab(item.id, item.name)"
        :class="activeIndex === index ? 'active' : ''">{{ item.name }}</span>
    </div>
    <hr>
    <div style="height: 350px;">
      <van-skeleton title avatar :row="3" :loading="loading">
        <dl v-for="(v, i) in FindInforData" :key="i" class="dl1" @click="onFindInfor(v.id)">
          <dt>
            <img :src="v.thumbnail" alt="" />
          </dt>
          <dd>
            <h4>{{ v.title }}</h4>
          </dd>
        </dl>
      </van-skeleton>
    </div>

    <span style="display: flex; justify-content: end; padding: 10px 20px;margin-bottom: 45px;" @click="oncha">查看更多</span>
    <hr />
  </div>
</template>
<script setup lang="ts">
import { getDocter, getFindInfor, getHomeTab } from '@/api'
import router from '@/router'
import { reactive, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const loading = ref(true);

const homeTabData = ref()
const name = ref('')

getHomeTab().then((res) => {
  homeTabData.value = res.data.result
  console.log(homeTabData.value, 'homeTabData')
})

const activeIndex = ref(0)
const plateId = ref(activeIndex.value)
console.log(plateId)
const page = ref(1)
const FindInforData = ref([] as any[])
const getFinList = async () => {
  const { data: res } = await getFindInfor({
    plateId: plateId.value,
    page: page.value,
    count: 3
  })
   loading.value = false
  console.log(res, 'getFindInfor')
  FindInforData.value.push(
    ...res.result.map((item: any) => ({
      id: item.id,
      title: item.title,
      thumbnail: item.thumbnail,
      source: item.source,
      releaseTime: item.releaseTime
    })) 
  )
}
getFinList()

const homeTab = (id: any, name: any) => {
  console.log(id)
  activeIndex.value = id -1
  plateId.value = id
  FindInforData.value = []
  page.value = 1
  localStorage.setItem('hname', JSON.stringify(name))
  localStorage.setItem('tabId', JSON.stringify(plateId.value))

  getFinList()
}
homeTab(1, '健康养生')

const onFindInfor = (id: any) => {
  console.log(id, 'id');
  localStorage.setItem('sid', id)
  router.push(`/informationDetail/${id}`)
}

const oncha = () => {
  router.push('/more')
}
</script>
